import styled from 'styled-components'

export const Head = styled.div`
  height: 3.2rem;
  background: #fff;
  overflow: hidden;
  .bg{
    background: #c29c5d;
    height: 10rem;
    width: 200%;
    margin-top: -8rem;
    margin-left: -50%;
    border-radius: 0 0 50% 50%;
  }
  .mp{
    width: 5rem;
    height: 2.5rem;
    background: #fff;
    margin: 0 auto;
    text-align: center;
    margin-top: -1.6rem;
    box-shadow: 0 0 .1rem 0 #f8eede;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: .1rem;
    img{
      width: 1rem;
      height: 1rem;
      border-radius: 50%;
      margin: 0 auto;
    }
    p{
      margin-top: .1rem;
      line-height: .4rem;
      font-size: .28rem;
      color: #333;
    }
  }
`
const arr = require('../../assets/img_arr.png')
export const Catalog = styled.ul`
  overflow: hidden;
  margin-top: .20rem;
  background: #fff;
  padding: 0 .30rem;
  li{
    border-bottom: 0.01rem solid #e6e6e6;
    line-height: .80rem;
    background: transparent url(${arr}) no-repeat right center;
    background-size: .15rem auto;
    span{
      float: right;
      vertical-align: middle;
      padding-right: .30rem;
    }
    img{
      width: .36rem;
      vertical-align: middle;
      margin-right: .18rem;
    }
  }
`



export const Study = styled.div`
  ul{
    overflow: hidden;
    li{
      display: flex;
      padding: .2rem;
      background: #fff;
      margin-bottom: .2rem;
      .tu{
        width: 2.4rem;
        margin-right: .25rem;
        img{
          width: 100%;
          height: 1.8rem;
        }
        p{
          line-height: .6rem;
          font-size: .24rem;
          color: #808080;
        }
      }
      .hidden{
        overflow: hidden;
        h2{
          font-size: .32rem;
          color: #333;
          font-weight: normal;
          margin-bottom: .2rem;
        }
        .info{
          dispaly: flex;
          color: #808080;
          font-size: .24rem;
          margin: .1rem 0;
          span{
            flex: 1;
            margin-right: .4rem;
          }
        }
        .wcd{
          font-size: .24rem;
          color: #333;
          margin: .3rem 0 .1rem;
          display: flex;
          span{
            flex: 1;
            background: #e3e3e3;
            border-radius: .5rem;
            height: .2rem;
            margin: .04rem .15rem;
            position: relative;
            i{
              display: block;
              position: absolute;
              left: 0;
              top: 0;
              height: .2rem;
              background: linear-gradient(to right, #cba56e, #e7c594);
              border-radius: .5rem;
            }
          }
        }
      }
    }
  }
`



export const InviteContent = styled.div`
  overflow: hidden;
  min-height: 100vh;
  font-size: 0;
  background: #252026;
  img{
    width: 100%
  }
  .tj{
    min-height: 100vh;
    background: #e12f3f;
  }
`

export const Integral = styled.div`
  .no{
    text-align: center;
    font-size: .24rem;
    line-height: .36rem;
    padding: 1rem;
    color: #808080;
    img{
      margin-bottom: .25rem;
    }
  }
  .integral{
    .total{
      display: flex;
      font-size: .3rem;
      line-height: .8rem;
      background:#fff;
      padding: 0 .2rem;
      i{
        color: #c29c5d;
        margin-right: .05rem;
        font-size: .3rem;
      }
      b{
        color: #c29c5d;
      }
      span{
        flex: 1;
        &:last-child{
          text-align: right;
        }
      } 
    }

    .tips{
      padding: .2rem;
      font-size: .24rem;
      color: #808080;
    }

    ul{
      background: #fff;
      li{
        padding: .2rem;
        display: flex;
        border-bottom: 1px solid #eee;
        >div{
          flex: 1;
          color: #808080;
          line-height: .5rem;
          .time{
            font-size: .28rem;
          }
          &:last-child{
            text-align: right;
            p{
              color: #c29c5d;
            }
          }
          i{
            font-size: .3rem;
            color: #c29c5d;
            margin-right: .1rem;
          }
          h2{
            font-size: .3rem;
            color: #333;
            font-weight: normal;
          }
        }
      }
    }
  }
`